<template>
    <div id="user">
        <!-- 输入表单 -->
        <el-card style="margin-bottom: 15px;">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="用户ID">
                    <el-input v-model="formInline.userID" placeholder="请输入用户ID" size="small"></el-input>
                </el-form-item>
                <el-form-item label="用户名称">
                    <el-input v-model="formInline.userName" placeholder="请输入用户名称" size="small"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="formInline.status" size="small">
                        <el-option label="所有" value="0"></el-option>
                        <el-option label="在职" value="1"></el-option>
                        <el-option label="离职" value="2"></el-option>
                        <el-option label="试用期" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button size="small">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 内容表格 -->
        <el-card>
            <div slot="header" class="clearfix">
                <el-button type="primary" size="small">新增</el-button>
            </div>

            <el-table :data="userList" stripe style="width: 100%">
                <el-table-column prop="userName" label="用户名" width="120">
                </el-table-column>
                <el-table-column prop="userEmail" label="用户邮箱" width="180">
                </el-table-column>
                <el-table-column prop="role" label="用户角色" width="100">
                    <template v-slot="{ row }">
                        <span>{{ userRole[row.role] }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="state" label="用户状态" width="100">
                    <template v-slot="{ row }">
                        <span>{{ userState[row.state] }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="注册时间" width="170">
                    <template v-slot="{ row }">
                        <el-tag size="small">{{ formatDate(row.createTime) }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="lastLoginTime" label="最后登录时间" width="170">
                    <template v-slot="{ row }">
                        <el-tag size="small" type="warning">{{ formatDate(row.lastLoginTime) }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template v-slot="{ row, $index }">
                        <el-button type="primary" size="small" v-actionVerify="'user-create'">新增</el-button>
                        <el-button type="warning" size="small" v-actionVerify="'user-edit'">编辑</el-button>
                        <el-button type="danger" size="small" v-actionVerify="'user-delete'">删除</el-button>
                        <el-button type="success" size="small" v-actionVerify="'user-query'">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
// 引入获取用户列表API
import { userListAPI } from '@/api/user';
// 引入日期格式化组件
import moment from 'moment';


export default {
    name: 'User',
    data() {
        return {
            // 表单数据
            formInline: {
                userID: '',
                userName: '',
                status: '在职',
            },
            // 表格数据
            userList: [],
            // 用户角色
            userRole: ['超级管理员', '普通用户'],
            // 用户状态
            userState: ['', '在职', '离职', '试用期'],
        };
    },
    computed: {
    },
    methods: {
        // 获取用户列表
        async getUserList() {
            let [data, err] = await userListAPI();
            // console.log(data.data.list);
            this.userList = data.data.list;
        },
        // 日期格式化
        formatDate(date) {
            return moment(date).format("YYYY-MM-DD HH:mm:ss");
        }
    },
    mounted() {
        // 获取用户列表
        this.getUserList();
    },
};
</script>

<style lang="scss" scoped>
.el-form-item {
    margin-bottom: 0px;
}
</style>